/* 尾部添加 */
.wei2{
	border-top: 1px solid #e3e3e3;
}

/* 轮播图 */
.header{
	width: 100%;
	height: 600px;
}
#header .item{
	width: 100%;
	height: 600px;
}
#header .item .introduce{
	width: 1200px;
	height: 600px;
	margin: 0 auto;
	position: relative;
}
/* 1和5 */
#header .item .introduce1{
	width: 500px;
	height: 250px;
	position: absolute;
	top: 200px;
	left: 570px;
	/* text-align: center; */
	vertical-align: top;
	color: #333333;

}
/* 2-4 */
#header .item .introduce2{
	width: 500px;
	height: 250px;
	position: absolute;
	top: 200px;
	left: 0px;
	vertical-align: top;
	color: #333333;

}
#header .item h1{
	font-size: 66px;
	margin: 5px 0;
	position:relative;
	animation-name:mymove;
	animation-duration:1s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
	/* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */
	-webkit-animation-name:mymove;
	-webkit-animation-duration:1s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
	}
	@keyframes mymove /* 对应animation-name，里面为执行的动画*/
	{
	from {top:200px;}/*执行动画的初始位置*/
	to {top:0px;}/*动画结束位置*/
	0% {
	opacity: 0; /*初始状态 透明度为10%*/
	}
	100% {
	opacity: 1; /*结尾状态 不透明*/
	}
	}
	@-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/
	{
	from {top:200px;}/*执行动画的初始位置*/
	to {top:0px;}/*动画结束位置*/
}
#header .item .slogan{
	font-size: 25px;
	margin: 5px 0;
	position:relative;
	animation-name:mymove;
	animation-duration:1.6s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
	/* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */
	-webkit-animation-name:mymove;
	-webkit-animation-duration:1.6s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
	}
	@keyframes mymove /* 对应animation-name，里面为执行的动画*/
	{
	from {top:150px;}/*执行动画的初始位置*/
	to {top:0px;}/*动画结束位置*/
	0% {
	opacity: 0; /*初始状态 透明度为10%*/
	}
	100% {
	opacity: 1; /*结尾状态 不透明*/
	}
	}
	@-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/
	{
	from {top:150px;}/*执行动画的初始位置*/
	to {top:0px;}/*动画结束位置*/
}
#header .item .list{
	margin: 5px 0;
	position:relative;
	animation-name:mymove;
	animation-duration:2.2s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
	/* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */
	-webkit-animation-name:mymove;
	-webkit-animation-duration:2.2s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
	}
	@keyframes mymove /* 对应animation-name，里面为执行的动画*/
	{
	from {top:100px;}/*执行动画的初始位置*/
	to {top:0px;}/*动画结束位置*/
	0% {
	opacity: 0; /*初始状态 透明度为10%*/
	}
	100% {
	opacity: 1; /*结尾状态 不透明*/
	}
	}
	@-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/
	{
	from {top:100px;}/*执行动画的初始位置*/
	to {top:0px;}/*动画结束位置*/
}
/* 二维码 */
#header .item .tp{
	margin-top: 16px;
    position:relative;
	animation-name:mymove;
	animation-duration:3.5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
	/* 兼容调试如果animation-name执行，那么-wekit-animation-name则不执行 */
	-webkit-animation-name:mymove;
	-webkit-animation-duration:3.5s;/* 5s表示执行动画的时间，0或不写则无动画效果 */
	}
	@keyframes mymove /* 对应animation-name，里面为执行的动画*/
	{
	from {top:100px;}/*执行动画的初始位置*/
	to {top:0px;}/*动画结束位置*/
	0% {
	opacity: 0; /*初始状态 透明度为10%*/
	}
	100% {
	opacity: 1; /*结尾状态 不透明*/
	}
	}
	@-webkit-keyframes mymove/* 对应-webkit-animation-name，里面为执行的动画*/
	{
	from {top:100px;}/*执行动画的初始位置*/
	to {top:0px;}/*动画结束位置*/
}
/* 图片上面字右边introduce为1 */
#header .item .introduce1 .list li{
	display: inline;
	font-size: 18px;
    padding-left: 10px;
    position: relative;
    margin-right: 10px;
}
#header .item .introduce1 .list li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
    margin-top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3b3b3b;

}
/* 图片上面字左边introduce为2 */
#header .item .introduce2 .list li{
	display: inline;
	font-size: 18px;
    padding-left: 10px;
    position: relative;
    margin-right: 10px;
}
#header .item .introduce2 .list li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
    margin-top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3b3b3b;
}
/* 五个图片 */
#header .item.item1{
	background: url('../img/product-banner-inquiry.jpg') no-repeat;
	background-size:100% 560px;
}
#header .item.item2{
	background: url('../img/product-banner-purchase.jpg') no-repeat;
	background-size:100% 560px;

}
#header .item.item3{
	background: url('../img/product-banner-stages.jpg') no-repeat;
	background-size:100% 560px;

}
#header .item.item4{
	background: url('../img/product-banner-saas.jpg') no-repeat;
	background-size:100% 560px;

}
#header .item.item5{
	background: url('../img/product-banner-ke.jpg') no-repeat;
	background-size:100% 560px;

}


/* 图片中下载等按钮 */
#header .item .btns{
	padding-top: 30px;
	font-size: 20px;
}
#header .item .btns .box{
	display: inline-block;
    position: relative;
}
/* 蓝色按键 */
#header .item .btns .box .box-blue{
	border-radius: 6px;
	width: 200px;
	height: 60px;
	display: inline-block;
    position: relative;
    bottom: -5px;
    margin-right: 10px;
    background-color: #0285ff;
    color: #fff;
}
/* 绿色按键 */
#header .item .btns .box .box-green{
	border-radius: 6px;
	width: 200px;
	height: 60px;
	display: inline-block;
    position: relative;
    bottom: -5px;
    margin-right: 10px;
    background-color: #1eb900;
    color: #fff;
}
#header .item .btns .box .iconfont{
	font-size: 30px;
	position: absolute;
	top: 15px;
	left: 30px;
}
#header .item .btns .box span{
    vertical-align: middle;
    line-height: 1;
    position: absolute;
    top: 20px;
    right: 30px;
}

/* 隐藏的二维码 */
#header .item .btns .box .btn-po{
	position: absolute;
    display: none;
    right: 9%;
    bottom: 80px;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    filter: drop-shadow(0 0 5px rgba(24, 24, 24, 0.3));
}
/* 二维码下三角箭头 */
#header .item .btns .box .btn-po::before{
	content: "";
	position: absolute;
	bottom: -9px;
    left: 47%;
    margin-left: -5px;
    overflow: hidden;
    border-bottom: none;
    border-right: 9px solid transparent;
    border-top: 9px solid #fff;
    border-left: 9px solid transparent;
}
#header .item .btns .box .btn-po img{
	display: block;
    margin: 0 auto 10px;
}
#header .item .btns .box .txt{
	height: 20px;
	font-size: 20px;
    color: #666;
    position: absolute;
    right: 20%;
    top: 165px;
    text-align: center;
}

/* 点击列表 */
#iconList{
	width: 100%;
	height: 200px;
	margin-top: 20px;
}
#iconList .opts{
	width: 1200px;
	height: 200px;
	margin: 0 auto;
}
#iconList .opts .opt{
	position: relative;
	width: 200px;
    height: 190px;
    box-shadow: 0 0 6px rgba(24, 24, 24, 0.24);
    margin: 0 13px;
    background: #fff;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
/* opt划入阴影消失 */
#iconList .opts .opt:hover{
	box-shadow: none;
}
/* opt字体颜色 */
#iconList .opts .opt:hover .title,#iconList .opts .opt:hover .event,#iconList .opts .opt.item1 .title,#iconList .opts .opt.item1 .event{
	color: #fff;
}
/* 划入时上部出现 */
#iconList .opts .opt:hover::before{
    top: -9px;
    transition: top .2s .4s;
}
/* 固定.opt.item时上部出现 */
#iconList .opts .opt.item1::before{
    top: -9px;
}
/* opt上部 */
#iconList .opts .opt::before{
	content: '';
    position: absolute;
    top: 0px;
    z-index: -1;
    left: 50%;
    margin-left: -9px;
    overflow: hidden;
    border-bottom: 9px solid #0291ff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}
/* opt下部 */
#iconList .opts .opt::after{
	content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: #0291ff;
    border-radius: 4px;
    z-index: 1;
    transition: all .4s;
}
/* opt划入颜色高度最高 */
#iconList .opts .opt:hover::after{
	height: 100%;
}
/* opt固定颜色高度最高 */
#iconList .opts .opt.item1::after{
	height: 100%;
}
/* li里面内容 */
#iconList .opts .opt .mark{
	position: absolute;
    right: 72px;
    top: 10px;
    z-index: 3;
    width: 50px;
    height: 43px;
    background: url('../img/logo.png');
    transform: scale(1);
}
#iconList .opts .opt .title{
	position: absolute;
    right: 45px;
    top: 60px;
    z-index: 3;
	font-size: 26px;
    margin: 5px 0 10px;
    line-height: 1;
    color:#6f6f6f;
}
#iconList .opts .opt .event{
	position: absolute;
    right:0px;
    top: 100px;
    z-index: 3;
	font-size: 17px;
    color: #6f6f6f;
    width: 100%;
    height: 70px;
    margin-bottom: 8px;
    line-height: 1.8;
}